<template>
    <div>
        <van-search v-model="value" show-action shape="round" placeholder="请输入搜索关键词" background="#f66"
            @search="onSearch" @click="onChange">
            <template #left>
                <div class="bj" @click="goshow">北京</div>
                <van-index-bar v-show="show">
                    <van-index-anchor index="A" />
                    <van-cell title="文本" />
                    <van-cell title="文本" />
                    <van-cell title="文本" />
                    <van-index-anchor index="B" />
                    <van-cell title="文本" />
                    <van-cell title="文本" />
                    <van-cell title="文本" />

                </van-index-bar>

            </template>
            <template #label>
                <div class="label">
                    <van-icon name="../imgs/logo.png" size="30px" /> <span>&nbsp;&nbsp;|</span>
                </div>
            </template>
            <template #action>
                <div class="LogCls" @click="LogFn">登录</div>
            </template>
        </van-search>
    </div>
</template>

<script>

export default {
    name: '',
    data() {
        return {
            value: '电脑',
            onSearch: '',
            show: false,
        };
    },
    methods: {
        LogFn() {
            this.$router.push({ path: '/MyLogin' })
        },
        goshow() {
            this.show = true

        },
        onChange() {
            this.$http.get('/pro/hotword')
                .then(res => {
                    if (res.data.code === '200') {
                        console.log(res.data);
                        this.onSearch = res.data.data
                    }
                })
        }
    }


}

</script>
<style scoped>
.LogCls {
    color: #fff;
}

.bj {
    color: #fff;
    font-size: 14px;
}

.label {
    display: flex;
    width: 40px;
    height: 36px;
    /* border:1px solid black; */
    align-items: center;
}

span {
    color: rgb(137, 137, 137);
    font-size: 20px;
    margin-top: -4px;
}

::v-deep .van-search__content {
    border: 1px solid black;
}
</style>